// ============================获取文章分类列表并渲染============================
// 封装函数方便增删改时调用
getArticleCates()
function getArticleCates() {
  axios.get('/my/article/cates').then(({ data: { data } }) => {
    const htmlStr = data.map(ele => {
      const { name, alias, Id } = ele
      // 将Id存到编辑按钮和删除按钮的自定义属性中，后端查找数据时需要使用
      return `<tr>
            <td>${name}</td>
            <td>${alias}</td>
            <td>
              <button type="button" class="layui-btn layui-btn-xs btn_edit" data-id="${Id}">编辑</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-danger btn_delete" data-id="${Id}">删除</button>
            </td>
          </tr>`
    }).join('')

    $('#tbody').html(htmlStr)
  })
}

// ===============================添加文章分类==============================
// https://www.ilayuis.com/doc/modules/layer.html#layer.open

// 添加文章类别弹出层的表单结构
const addFormHtml = ` <form  id="addForm" class="layui-form">
        <!-- 第一行 分类名称 -->
        <div class="layui-form-item">
          <label class="layui-form-label">分类名称</label>
          <div class="layui-input-block">
            <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第二行 分类别名  -->
        <div class="layui-form-item">
          <label class="layui-form-label">分类别名</label>
          <div class="layui-input-block">
            <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第三行 按钮 -->
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>`


const layer = layui.layer
const form = layui.form
// 声明弹出层索引，关闭弹出层时需要用到
let addFormIndex
// 配置添加文章类别弹出层
$('#btnAddCate').on('click', function () {
  addFormIndex = layer.open({
    // 弹出层内容
    content: addFormHtml,
    // 层类型:页面层
    type: 1,
    // 标题
    title: '添加文章类别',
    // 弹出层宽高
    area: ['500px', '250px']
  })
})

// form#addForm是动态创建的，注册事件需要使用事件委托
$('body').on('submit', '#addForm', function (e) {
  e.preventDefault()
  // 必须使用$(this)不能写成$('#addForm')否则拿不到值
  const data = $(this).serialize()
  axios.post('/my/article/addcates', data).then(({ data: { status, message } }) => {
    if (status !== 0) return layer.msg(message)
    layer.msg(message)
    // 关闭添加分类弹出层
    layer.close(addFormIndex)
    // 重新渲染文章类别列表
    getArticleCates()
  })
})


// ===============================修改文章分类==============================

// 修改文章类别弹出层的表单结构
const editFormHtml = `      <form id="editForm" class="layui-form" lay-filter="editForm" >
         <!-- 新增一行为了收集Id，发修改数据请求时需要用到，用户无需看到所以隐藏 -->
        <div class="layui-form-item" style="display:none">
          <label class="layui-form-label">分类Id</label>
          <div class="layui-input-block">
            <input type="text" name="Id" required lay-verify="required" placeholder="请输入Id" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第一行 分类名称 -->
        <div class="layui-form-item">
          <label class="layui-form-label">分类名称</label>
          <div class="layui-input-block">
            <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第二行 分类别名  -->
        <div class="layui-form-item">
          <label class="layui-form-label">分类别名</label>
          <div class="layui-input-block">
            <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第三行 按钮 -->
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
          </div>
        </div>
      </form>`


// 声明弹出层索引，关闭弹出层时需要用到
let editFormIndex
// 编辑按钮是动态生成的,需要事件委托注册事件
$('#tbody').on('click', '.btn_edit', function () {

  // 拿到当前需要编辑数据的Id
  const Id = $(this).attr('data-id')
  //发请求拿到需要编辑的类别信息填充到表单中
  axios.get('/my/article/cates/' + Id).then(({ data: { data } }) => {
    //通过layui的form.val()给表单赋值,data中的参数需要和表单元素name值一一对应
    //editForm 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
    form.val("editForm", data)
  })

  // 配置添加文章类别弹出层
  editFormIndex = layer.open({
    content: editFormHtml,
    type: 1,
    title: '修改文章类别',
    area: ['500px', '250px']
  })
})


// 编辑表单弹出层是动态创建的，需要事件委托注册事件
$('body').on('submit', '#editForm', function (e) {
  e.preventDefault()
  const data = $(this).serialize()
  // 发请求修改分类数据
  axios.post('/my/article/updatecate', data).then(({ data: { message, status } }) => {
    if (status !== 0) return layer.msg(message)
    layer.msg('修改成功')
    // 关闭编辑表单弹出层
    layer.close(editFormIndex)
    // 重新渲染分类列表
    getArticleCates()
  })
})


// ===============================删除文章分类==============================
$('#tbody').on('click', '.btn_delete', function () {
  // 获取Id
  const Id = $(this).attr('data-id')
  // 带上Id发起删除分类请求
  axios.get('/my/article/deletecate/' + Id).then(({ data: { status, message } }) => {
    if (status !== 0) return layer.msg(message)
    layer.msg(message)
    // 删除成功后重新渲染分类列表
    getArticleCates()
  })
})